<template>
	<view>
		<view class="card">
			<view class="icons">
				<image src="/static/icons/account_card_icon@2x.png" class="hb" mode=""></image>
				<text class="txt">账户余额</text>
			</view>
			<view class="recharge" @click="recharge">
				<text class="rec">充值</text>
			</view>
			<view class="num">
				￥{{userInfo.balance.toFixed(2)}}
			</view>
			<view class="yuan">
				(元)
			</view>

			<view class="tixian" @click="toGetCash">
				<!-- 去提现 >> -->
			</view>
		</view>
		<!-- 嗨，记个流水账 -->
		<view class="record-list">
			<view class="item" v-for="(item,index) in recordList" :key="index">
				<view class="pic">
					<image class="type-pic" src="/static/icons/get_re_icon@2x.png" mode="" v-if="item.type=='2'">
					</image>
					<image class="type-pic" src="/static/icons/purchase_subtract_icon@2x.png" v-else></image>
				</view>
				<view class="desc">
					<view class="title">
						{{item.title}}
					</view>
					<view class="time">
						{{item.createDate}}
					</view>
				</view>
				<view class="amount">
					<view class="count">
						{{item.dzType=='1'? '+'+item.amount:'-'+item.amount}}
					</view>
					<view class="total">
						{{item.totalAmount}}
					</view>
				</view>
			</view>
		</view>

		<!-- 充值 遮罩 -->
		<view class="mask" v-if="showMask">
			<view class="dialog">
				<view class="title">
					充值金额
				</view>
				<input type="digit" focus class="ipt" @input="getIptValue" placeholder="请输入充值金额" :value="rechargeNum" />

				<view class="btns">
					<view class="cancle" @click="closeMask">
						取消
					</view>
					<view class="pay" @click="toPay">
						立即支付
					</view>
				</view>
			</view>
		</view>
		<!-- 提现 遮罩-->
		<view class="mask" v-if="showCashMask">
			<view class="dialog">
				<view class="title">
					提现金额
				</view>
				<input focus type="digit" class="ipt" @input="getIptValue" placeholder="请输入提现金额" :value="getCashNum" />

				<view class="btns">
					<view class="cancle" @click="closeMask">
						取消
					</view>
					<view class="pay" @click="sureGetCash">
						确认
					</view>
				</view>
			</view>
		</view>
		<!-- 等级不足时，显示遮罩 -->
		<view class="mask" v-if="showTips">
			<view class="need-level">
				<view class="cant">
					等级不足，无法提现！
				</view>
				<view class="sure-btn" @click="showTips=false">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				num: 0,
				recordList: [],
				rechargeNum: null, // 充值金额
				showMask: false, // 显示对话框
				showTips: false, // 等级不足对话框
				showCashMask: false, // 提现对话框
				getCashNum: null, // 提现金额
				orderId:'',  // 充值订单号
				orderData:{},  // 预订单参数
				paySign:'' // 签名
			};
		},
		onLoad(option) {
			// this.num = option.num
			this.getMoneyRecord()
			console.log(JSON.parse(uni.getStorageSync('userinfo'))._id)
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			// 更新用户信息
			async updateUserData(){
				const {data:res}=await uni.$http.post('/user/getUserData',{
					openid:uni.getStorageSync('openId'),
					phone:uni.getStorageSync('phone'),
					nickname:this.userInfo.nickname,
					headImg:this.userInfo.headImg
				})
				console.log(res)
				this.updateUserInfo(res.data)
			},
			// 取消充值提现
			closeMask(){
				this.showCashMask=false
				this.showMask=false
				this.getCashNum=null
				this.rechargeNum=null
			},
			// 确认提现
			async sureGetCash() {
				if (this.getCashNum > 0) {
					const {
						data: res
					} = await uni.$http.post('/user/cashHb', {
						userId: JSON.parse(uni.getStorageSync('userinfo'))._id,
						amount: this.getCashNum
					})
					if (res.msg == '等级不足,无法提现') {
						this.showTips = true
						this.showCashMask = false
					}
					console.log(res)
					// 提现成功后，关闭遮罩
					// if(){
						this.showCashMask=false
						this.showMask=false
						this.getCashNum=null
						this.rechargeNum=null
					// }
				}
			},
			// 提现
			toGetCash() {
				this.showCashMask = true
			},
			// 获取充值金额
			getIptValue(e) {
				let value = e.detail.value.replace(/[^\d]/g,'')
				// this.rechargeNum = e.detail
				// 事件触发以后，清除上一次的定时器
				clearTimeout(this.timerId)
				// 重新启动一个定时器获取用户输入的最后一个关键字
				this.timerId = setTimeout(() => {
					this.rechargeNum = value.trim()
					this.getCashNum = value.trim()
					// console.log(+e.detail.value)
				}, 500)
			},
			// 充值
			recharge() {
				this.showMask = true
			},
			
			// 生成预订单
			async creatOrder(id){
				// 生成预订单
				const {
					data: res
				} = await uni.$http.post('/payApi/appwxorderadd', {
					openId: uni.getStorageSync('openId'),
					orderId: id,
					userId:this.userInfo._id
				})
				this.orderData = res.data.param
				
				// 二次签名
				this.paySign = md5.hexMD5('appId=' + res.data.param.appid + '&nonceStr=' + res.data.param.noncestr +
					'&package=' + 'prepay_id=' + res.data.param.prepayid + '&signType=MD5&timeStamp=' + res.data
					.param.timestamp + '&key=' + res.data.key).toUpperCase();
					
					// 调用微信支付接口
					var that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: this.orderData.timestamp + '',
						nonceStr: this.orderData.noncestr,
						package: 'prepay_id=' + this.orderData.prepayid,
						signType: 'MD5',
						paySign: this.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							that.updateUserData()
							that.getMoneyRecord()
							
							
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
			},
			// 确认充值支付
			async toPay() {
				// 调支付接口：支付后关闭弹窗
				if (this.rechargeNum > 0) {
					const {
						data: res
					} = await uni.$http.post('/user/rechargeMoney', {
						userId: JSON.parse(uni.getStorageSync('userinfo'))._id,
						amount: this.rechargeNum
					})
					console.log(res)
					this.orderId=res.data
					
					// 调用生成预订单接口
					this.creatOrder(res.data)
					
					// 充值成功后，关闭遮罩
					// if(){
						this.showCashMask=false
						this.showMask=false
						this.getCashNum=null
						this.rechargeNum=null
					// }
					
					
				}
			},
			// 获取流水账
			async getMoneyRecord() {
				const {
					data: res
				} = await uni.$http.post('/user/getMoneyRecord', {
					"userId": this.userInfo._id,
					"offset": 1,
					"limit": 99
				})
				console.log(res.data.list)
				this.recordList = res.data.list
			 
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
	}
</script>

<style lang="scss">
	.hb {
		width: 35rpx;
		height: 34rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}


	page {
		padding: 55rpx 24rpx;
		box-sizing: border-box;

		.card {
			width: 702rpx;
			height: 316rpx;
			background: linear-gradient(0deg, #303030 0%, #545454 100%);
			// background: linear-gradient(42deg, #EF1B18 0%, #F2672A 98%);
			border-radius: 20rpx;
			padding: 0 26rpx;
			box-sizing: border-box;
			margin-bottom: 80rpx;
			position: relative;

			.recharge {
				position: absolute;
				right: 0;
				top: 60rpx;
				width: 120rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 34rpx 0rpx 0rpx 34rpx;
				font-size: 32rpx;
				font-weight: bold;
				background-color: rgba(255, 255, 255, .2);
				color: #FFFFFF !important;
			}

			.icons {
				height: 100rpx;
				line-height: 100rpx;

				.txt {
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.num {
				font-size: 72rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-family: DIN;
				text-align: center;
			}

			.yuan {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-family: DIN;
				text-align: center;
			}

			.tixian {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: right;
				margin-top: 30rpx;
			}
		}
	}

	.record-list {
		.item {
			height: 156rpx;
			border-bottom: 1rpx solid #e8e8e8;
			padding: 13rpx 0;
			box-sizing: border-box;
			display: flex;

			.pic {
				width: 70rpx;
				display: flex;
				// justify-items: center;
				align-items: center;

				.type-pic {
					width: 45rpx;
					height: 54rpx;
					vertical-align: middle;
					margin: auto;
				}
			}

			.desc {
				width: 550rpx;
				padding-top: 13rpx;
				box-sizing: border-box;
				padding-left: 20rpx;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #111111;
				}

				.time {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
					margin-top: 25rpx;
				}
			}

			.amount {
				flex: 1;
				text-align: right;

				.count {
					font-size: 32rpx;
					font-weight: bold;
					color: #111111;
				}

				.total {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
					margin-top: 28rpx;
				}
			}
		}
	}

	.need-level {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		width: 620rpx;
		height: 390rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		box-sizing: border-box;
		padding: 28rpx;

		.cant {
			font-size: 36rpx;
			font-weight: bold;
			height: 220rpx;
			line-height: 220rpx;
			color: #222222;
		}

		.sure-btn {
			width: 467rpx;
			height: 93rpx;
			line-height: 93rpx;
			text-align: center;
			margin: auto;
			background: linear-gradient(-42deg, #DA441B, #F56942);
			border-radius: 8rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .6);

		.dialog {
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);
			width: 620rpx;
			height: 390rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;
			box-sizing: border-box;
			padding: 28rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
			}

			.ipt {
				width: 483rpx;
				height: 2rpx;
				border-bottom: 2rpx solid #F2F2F2;
				margin: auto;
				margin-top: 100rpx;
			}

			.btns {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;

				.cancle,
				.pay {
					width: 227rpx;
					height: 93rpx;
					border-radius: 8px;
					line-height: 93rpx;
					text-align: center;
				}

				.cancle {
					background: #EAEAEA;
					color: #999999;
				}

				.pay {
					background: linear-gradient(-42deg, #DA441B, #F56942);
					color: #fff;
				}
			}
		}
	}
</style>
